<script setup>
import {onMounted, onUnmounted, ref} from "vue"
import AMapLoader from "@amap/amap-jsapi-loader"

let map = null;
let marker = ref(null);

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: 'b5b43481692f7b5f48aea7a08ad4523a',
  };

  AMapLoader.load({
    key: '1d479be24738e28ee0a18a77c038f6f8',
    version: "2.0",
    plugins: ["AMap.Marker"],
  })
      .then((AMap) => {
        map = new AMap.Map("container", {
          viewMode: "2D",
          zoom: 15,
          center: [125.282574, 43.821519],
        });

        map.add(marker.value = new AMap.Marker({
          position: [125.282574, 43.821519],
          map: map,
        }));
      })
      .catch((e) => {
        console.error(e);
      });
})

onUnmounted(() => {
  map?.destroy();
})
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 60%;
}

.custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}

.custom-content-marker img {
  width: 100%;
  height: 100%;
}
</style>